<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="150px"
        @submit.prevent
      >
        <el-divider content-position="left">邮件配置</el-divider>
        
        <el-form-item label="注册邮箱标题" prop="registerEmailTitle">
          <el-input
            v-model="formData.registerEmailTitle"
            placeholder="请输入注册邮件验证码邮件标题"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="注册邮箱内容" prop="registerEmailContent">
          <el-input
            v-model="formData.registerEmailContent"
            type="textarea"
            :rows="4"
            placeholder="请输入注册邮件验证码邮件内容，使用 %s 作为验证码占位符"
          />
          <div class="form-tip">
            提示：使用 %s 作为验证码的占位符，例如：您的验证码是：%s
          </div>
        </el-form-item>
        
        <el-divider content-position="left">用户配置</el-divider>
        
        <el-form-item label="初始空间大小" prop="userInitUseSpace">
          <el-input-number
            v-model="formData.userInitUseSpace"
            :min="1"
            :max="1024 * 1024"
            controls-position="right"
          >
            <template #suffix>MB</template>
          </el-input-number>
          <div class="form-tip">
            提示：新用户注册时默认分配的存储空间大小
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const api = {
  getSysSettings: '/admin/getSysSettings',
  saveSettings: '/admin/saveSysSettings'
}

const formRef = ref()
const formData = ref({
  registerEmailTitle: '',
  registerEmailContent: '',
  userInitUseSpace: 1024 // 默认1GB
})

const loading = ref(false)

const rules = {
  registerEmailTitle: [
    { required: true, message: '请输入注册邮件标题' },
    { max: 100, message: '标题长度不能超过100个字符' }
  ],
  registerEmailContent: [
    { required: true, message: '请输入注册邮件内容' },
    { max: 500, message: '内容长度不能超过500个字符' }
  ],
  userInitUseSpace: [
    { required: true, message: '请输入初始空间大小' },
    { type: 'number', message: '空间大小必须为数字' },
    { validator: (rule, value, callback) => {
      if (value < 1) {
        callback(new Error('空间大小不能小于1MB'))
      } else if (value > 1024 * 1024) {
        callback(new Error('空间大小不能超过1TB'))
      } else {
        callback()
      }
    }}
  ]
}

// 加载系统设置
const loadSettings = async () => {
  loading.value = true
  try {
    const result = await proxy.Request({
      url: api.getSysSettings
    })
    if (result) {
      formData.value = result.data
    }
  } finally {
    loading.value = false
  }
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    
    loading.value = true
    try {
      const result = await proxy.Request({
        url: api.saveSettings,
        params: formData.value
      })
      
      if (result) {
        proxy.Message.success('设置保存成功')
      }
    } finally {
      loading.value = false
    }
  })
}

// 初始化加载
onMounted(() => {
  loadSettings()
})
</script>

<style lang="scss" scoped>
.settings-container {
  .settings-card {
    border: none;
    background: linear-gradient(to right, #fff, #fafafa);
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      
      span {
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(120deg, #bd34fe 30%, #47caff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    
    :deep(.el-form) {
      padding: 30px 20px;
      
      .el-divider {
        margin: 24px 0;
        
        &:first-child {
          margin-top: 0;
        }
        
        .el-divider__text {
          font-size: 16px;
          font-weight: bold;
          color: #409EFF;
          background-color: #fff;
          padding: 0 20px;
          
          &::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: linear-gradient(180deg, #bd34fe, #47caff);
            border-radius: 2px;
          }
        }
      }
      
      .el-form-item {
        margin-bottom: 24px;
        
        &:last-child {
          margin-bottom: 0;
          padding-top: 20px;
          border-top: 1px solid #f0f0f0;
        }
        
        .el-form-item__label {
          font-weight: 500;
          color: #606266;
        }
        
        .el-input,
        .el-input-number {
          width: 100%;
          max-width: 500px;
          
          .el-input__wrapper {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            
            &:hover {
              box-shadow: 0 0 0 1px #c0c4cc inset;
            }
            
            &.is-focus {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }
        
        .el-textarea {
          width: 100%;
          max-width: 500px;
          
          .el-textarea__inner {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            
            &:hover {
              box-shadow: 0 0 0 1px #c0c4cc inset;
            }
            
            &:focus {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }
        
        .form-tip {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
          line-height: 1.4;
          
          &::before {
            content: '💡';
            margin-right: 4px;
          }
        }
      }
      
      .el-button {
        padding: 12px 24px;
        font-weight: 500;
        transition: all 0.3s;
        
        &.el-button--primary {
          background: linear-gradient(120deg, #bd34fe 30%, #47caff);
          border: none;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(189, 52, 254, 0.3);
          }
          
          &:active {
            transform: translateY(0);
          }
          
          &.is-loading {
            &::before {
              background: linear-gradient(120deg, rgba(189, 52, 254, 0.3), rgba(71, 202, 255, 0.3));
            }
          }
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .settings-container {
    .settings-card {
      :deep(.el-form) {
        padding: 20px;
        
        .el-form-item {
          .el-form-item__label {
            float: none;
            display: block;
            text-align: left;
            padding: 0 0 8px;
          }
          
          .el-form-item__content {
            margin-left: 0 !important;
          }
        }
      }
    }
  }
}
</style> 